import { Callout } from "nextra/components";

# Plugin

<Callout>
  The plugin API is highly experimental and is likely to experience breaking
  changes.
</Callout>

A plugins is an extensions that enhances the capabilities of Puck.

```tsx showLineNumbers copy {3-9, 15}
import { Puck } from "@measured/puck";

const MyPlugin = {
  overrides: {
    drawerItem: ({ name }) => (
      <div style={{ backgroundColor: "hotpink" }}>{name}</div>
    ),
  },
};

export function Editor() {
  return (
    <Puck
      // ...
      plugins={[MyPlugin]}
    />
  );
}
```

## Params

| Prop                                  | Example                                    | Type                                                    | Status |
| ------------------------------------- | ------------------------------------------ | ------------------------------------------------------- | ------ |
| [`fieldTransforms`](#fieldtransforms) | `fieldTransforms: { text: () => <div /> }` | [FieldTransforms](/docs/api-reference/field-transforms) | -      |
| [`overrides`](#overrides)             | `overrides: { fields: () => <div /> }`     | [Overrides](/docs/api-reference/overrides)              | -      |

### `fieldTransforms`

Transform the value of a field before rendering in the editor.Implements the [Field Transforms API](/docs/api-reference/field-transforms).

### `overrides`

Override the render functions for specific portions of the Puck UI. Implements the [`overrides` API](/docs/api-reference/overrides).
